<template>
    <view class="type-area cus-page">
        <!-- 收货地址 -->
        <view class="com-m-t-20 location">
            <view v-if="hasLocation" class="com-flex-col com-row-center com-col-center" style="height:180rpx"
                @tap="addEditAddress()">
                <u-icon name="/static/common/location.png" size="56rpx"></u-icon>
                <text class="com-m-t-16 com-minor-color">新增收获地址</text>
            </view>
            <view v-else class="com-p-32">
                <view class="com-flex">
                    <u-tag text="默认" type="error" size="mini"></u-tag>
                    <text class="com-m-l-16">四川省成都市都江堰市</text>
                </view>
                <view class="com-m-t-24 com-flex" @tap="addEditAddress(1)">
                    <text class="com-m-r-12 com-font-36 com-font-bold">奎光塔街道学府路366号阿坝州工商都江堰干休所</text>
                    <u-icon name="arrow-right" color="#666" size="28rpx" top="2rpx"></u-icon>
                </view>
                <view class="com-m-t-24 com-flex">
                    <text class="com-m-r-24">李鸥</text>
                    <text>18100011234</text>
                </view>
            </view>
            <image style="width:100%;height:4rpx" src="/static/common/location_line.png" alt=""></image>
        </view>

        <!-- list -->
        <view class="com-m-t-20 card">
            <view v-for="(item,index) in 2" :key="index" class="com-m-t-40 com-flex item">
                <image src="/static/temporary/img2.jpg" alt=""></image>
                <view class="com-flex-col com-col-top com-row-around right">
                    <text class="u-line-2 com-font-bold title">宝可梦集换式卡牌游戏PTCGA 简中日月第一弹</text>
                    <u-tag bgColor="#EAFAFF" borderColor="#EAFAFF" color="#02BDF3" size="mini" text="新品"></u-tag>
                    <view class="com-flex com-row-between" style="width:100%">
                        <view class="price">
                            <view class="com-price-color">
                                <text class="com-font-32 com-font-bold">1660</text>
                                <text class="com-font-26">日元</text>
                            </view>
                            <text class="com-font-20 com-minor-color">(约88人民币)</text>
                        </view>
                        <text>x1</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 清单明细 -->
        <view class="com-m-t-20">
            <ct-row-list :datas="detailedList" />
        </view>

        <!-- 文本域框 -->
        <view class="com-m-t-20 textarea">
            <view class="com-p-b-32 title">
                <text class="com-font-32 com-font-bold">订单留言</text>
            </view>
            <u--textarea count maxlength="100" :border="'none'" confirmType="done"
                v-model="textarea" placeholder="选填，可以给卖家备注，煤炉商品暂时不支持议价哦" >
            </u--textarea>
        </view>

        <!-- 支付方式 -->
        <view class="com-m-t-20">
            <ct-pay-way @select="selectPayWay" />
        </view>

        <!-- 购买须知 -->
        <view class="com-m-t-32">
            <text class="com-font-32 com-font-bold com-price-color">购买须知</text>
            <view class="com-m-t-16 com-minor-color" style="line-height:40rpx">
                第一条：拍拍皮小程序仅向用户提供交易平台和代购服务，无法保证商品质量。商品成功下单后用户无法单方面取消，且拍卖商品不接受退换货。请用户注意，介意勿拍。
            </view>
            <view class="com-minor-color" style="line-height:40rpx">
                第二条：商品在到达拍拍皮东京仓库后会收取国际物流费用。
            </view>
            <view class="com-minor-color" style="line-height:40rpx">
                第三条：由于代拍商品的特殊性，商品下单成功后通常无法取消或退货。
            </view>
            <view class="com-flex com-row-center">
                <view class="com-m-t-36 com-flex">
                    <u-checkbox-group
                        placement="column"
                        @change="checkboxChange">
                        <u-checkbox :checked="isRead" size="40rpx" shape="circle" iconSize="30rpx" name="item.name"></u-checkbox>
                    </u-checkbox-group>
                    <text class="com-font-30 com-font-bold com-active-color">请阅读完毕并且勾选上列购买须知</text>  
                </view>
            </view>
        </view>

        <!-- 合计 -->
        <view class="all" :style="{height:incrementModel ? '100%' : 'auto'}">
            <view v-if="incrementModel" class="detail-box com-flex com-col-bottom">
				<view class="detail" :style="{height:incrementModel ? 'auto' : 0 }">
					<view class="type-area com-flex com-row-between">
						<view class="com-m-r-36"></view>
						<text class="com-font-32 com-font-bold">是否购买增势服务</text>
						<u-icon name="close" size="36rpx" @tap="incrementModel=false"></u-icon>
					</view>
                    <view class="com-m-t-40 com-m-b-20 type-area">
                        <u-checkbox-group v-model="checkboxValue" placement="column">
                            <view v-for="(item, index) in checkboxList" :key="index" 
                                class="com-flex com-row-between com-p-t-24 com-p-b-24">
                                <u-checkbox 
                                    size="40rpx" shape="circle" iconSize="30rpx"
                                    labelSize="32rpx"
                                    labelColor="#212122"
                                    :label="item.name"
                                    :name="item.name">
                                </u-checkbox>
                                <view class="com-flex com-col-bottom">
                                    <view class="com-m-r-12 com-price-color">
                                        <text class="com-font-32 com-font-bold">1660</text>
                                        <text class="com-font-28">日元</text>
                                    </view>
                                    <text class="com-font-26 com-minor-color">(余额{{item.rmb}}人民币)</text>
                                </view>
                            </view>
                        </u-checkbox-group>
                    </view>
                    <view class="com-flex com-row-center hint">
                        商品增值服务是在商品入库时按照需求给您上传根据
                    </view>
				</view>
			</view>
            <u-gap :height="mixinGetSysInfo().platform == 'devtools' ? '150rpx': '120rpx' " bgColor="transparent"></u-gap>
            <view class="content">
                <view class="type-area com-flex com-row-between com-col-center content">
                    <view class="com-flex-col com-col-bottom" >
                        <text class="com-font-32 com-price-color com-font-bold">合计：1600日元</text>
                        <text class="com-m-t-12 com-font-24 com-minor-color">(约154人民币)</text>
                    </view>
                    <view class="com-flex com-row-center com-col-center btn" @tap="submit">提交并支付订单</view>
                </view>
                <u-gap v-if="mixinGetSysInfo().platform == 'devtools'" height="30rpx" bgColor="transparent"></u-gap>
            </view>
        </view>


        <!-- 底部间距 -->
		<u-gap :height="mixinGetSysInfo().platform == 'devtools' ? '180rpx': '150rpx' " bgColor="transparent"></u-gap>
    </view>
</template>


<script>
export default {
    name: "placeOrder",
    props: {},
    components: {},

    data() {
        return {
            hasLocation: true,
            detailedList: {
                title: "清单列表",
                list: [
                    { title: '当前汇率', value:'1日元=0.0529人名币' },
                    { title: '商品总价', value:'1660日元' },
                    { title: '日本国内运费', value:'0日元' },
                ]
            },
            textarea: "",
            isRead: false,
            incrementModel: false,
            checkboxValue:[],
            checkboxList: [
                { name: '加固包装', disabled: false, price:1660, rmb:88 },
                { name: '照片拍照', disabled: false, price:1660, rmb:88 },
            ],
        };
    },

    computed: {},
    watch: {},

    onHide(){
        this.incrementModel = false;
    },

    mounted() {
        setTimeout(()=>{
            this.hasLocation = false
        },6000)
    },

    methods: {
        // 编辑或者添加地址
        addEditAddress(id){
            if(id){
                uni.navigateTo({ url: "/pages/shopping-cart/address-list" })
            }else{
                uni.navigateTo({ url: "/pages/shopping-cart/address-add-edit" })
            }
        },

        // 支付方式
        selectPayWay(e){
            console.log(e.value)
        },
        // 阅读
        checkboxChange(n) {
            this.isRead = !this.isRead;
        },

        // 提交订单
        submit(){
            if( this.isRead ){
                if(!this.incrementModel){
                    this.incrementModel = true
                }else{
                    uni.navigateTo({ url: "/pages/shopping-cart/pay-finsh" })
                }
            }else{
                uni.$u.toast("请勾选阅读须知")
            }
        },
    },
};
</script>


<style scoped lang='scss'>
    .location{
        background: #fff;
        border-radius: 24rpx;
    }

    .card{
        background: #fff;
        border-radius: 24rpx;
        padding: 48rpx 32rpx;
        .item{
            &:first-child{
                margin-top: 0 !important;
            }
            image{
                width: 200rpx;
                height: 200rpx;
                margin-right: 26rpx;
                border-radius: 24rpx;
            }
            .right{
                height: 200rpx;
                flex: 1;
                .title{
                    line-height: 40rpx;
                }
            }
        }
    }
    
    // 文本域框
    .textarea{
        background: #fff;
        border-radius: 24rpx;
        padding: 32rpx;
        .title{
            border-bottom: 1px solid #F8F8F8;
        }
    }
    /deep/.u-textarea{
        padding: 9px 0 !important;
    }

    .all{
        width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 110;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		.detail-box{
			flex: 1;
			background: rgba(0,0,0,.5);
			.detail{
				width: 100%;
				padding: 40rpx 0 0 0;
				border-radius: 24rpx 24rpx 0 0;
				background: #fff;
				transition: all .5s;
                .hint{
                    height: 64rpx;
                    background: #EAFAFF;
                    font-size: 24rpx;
                    color: #02BDF3;
                }
			}
		}
        .content{
            width: 100%;
            position: fixed;
            left: 0;
            bottom: 0;
            background: #fff;
            .content{
                height: 120rpx;
                padding-left: 120rpx;
                .btn{
                    width: 300rpx;
                    height: 80rpx;
                    background: linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%);
                    border-radius: 40rpx;
                    font-size: 32rpx;
                    color: #fff;
                }
            }
        }
    }
</style>